<template>
  <div>
    <!-- <card
      @del="delItem"
      v-for="item in arr"
      :key="item.id"
      :cardObj="item"
    ></card> -->

    <!-- <wrapper :info="obj"></wrapper> -->

    <todoheader @add="handleAdd"></todoheader>
    <ul>
      <!-- 封装一个todo-item的组件，专门用来渲染每一条todo事项 -->
      <todo v-for="item in pageList" :key="item.id" :todo="item"></todo>
    </ul>
    <todofooter
      :num="leftNum"
      @clearDone="clearDone"
      @changeStatus="changeStatus"
      :status="status"
    ></todofooter>

    <hr>
    <axiosdemo></axiosdemo>
    <img :src="src" alt="">
  </div>
</template>
<script>
// @是src的别名
// import card from '@/components/card.vue'
// import wrapper from '@/components/wrapper.vue'
import todo from '@/components/todo.vue'
import eventbus from '@/utils/eventbus'
import todoheader from '@/components/todo-header'
import todofooter from '@/components/todo-footer'
import axiosdemo from '@/components/axios-demo'

export default {
  components: {
    // card,
    // wrapper,
    todo,
    todoheader,
    todofooter,
    axiosdemo
  },
  mounted () {
    // 类似window.onload ，它是等组件挂载到页面，自动执行
    // 通过事件总线监听事件，并通过回调出来传递过来的参数。
    eventbus.$on('del', (id) => {
      console.log(id)
    })
  },
  data () {
    return {
      src: require('./assets/logo.png'),
      arr: [
        {
          id: 1,
          author: 'jack',
          avatar:
            'https://images.pexels.com/users/avatars/126286496/yaroslava-borz-130.jpeg?auto=compress&fit=crop&h=60&w=60',
          img: 'https://img1.baidu.com/it/u=1261014649,765298546&fm=26&fmt=auto'
        },
        {
          id: 2,
          author: 'jack',
          avatar:
            'https://images.pexels.com/users/avatars/126286496/yaroslava-borz-130.jpeg?auto=compress&fit=crop&h=60&w=60',
          img: 'https://img1.baidu.com/it/u=1261014649,765298546&fm=26&fmt=auto'
        },
        {
          id: 3,
          author: 'jack',
          avatar:
            'https://images.pexels.com/users/avatars/126286496/yaroslava-borz-130.jpeg?auto=compress&fit=crop&h=60&w=60',
          img: 'https://img1.baidu.com/it/u=1261014649,765298546&fm=26&fmt=auto'
        }
      ],
      obj: {
        icon: '⚛',
        title: '淘宝*天猫',
        type: '数码家电热销榜',
        goodsList: [
          {
            id: 1,
            img: 'https://img.pddpic.com/mms-material-img/2021-11-04/0cb60fbd-6d36-4ee8-8a78-17a7361a7e9c.jpeg.a.jpeg',
            title: '湘大王鲜卤鸭脖批发鸭脖子风干手撕口味鸭 原价¥3.99 券后¥2.99',
            desc: '月销375件'
          }
        ]
      },
      todoList: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false }
      ],
      // 1代表全部 2代表已完成 3未完成
      status: 1
    }
  },
  computed: {
    leftNum () {
      let num = 0
      this.todoList.map((item) => {
        if (!item.isDone) {
          num++
        }
      })
      return num
    },
    pageList () {
      switch (this.status) {
        case 1:
          return this.todoList
        case 2:
          return this.todoList.filter((item) => item.isDone)
        default:
          return this.todoList.filter((item) => !item.isDone)
      }
    }
  },
  methods: {
    delItem (id) {
      console.log(id)
      const idx = this.arr.findIndex((item) => item.id === id)
      this.arr.splice(idx, 1)
    },
    handleAdd (newTodo) {
      const ids = this.todoList.map((item) => item.id)
      const id = Math.max.apply(null, ids) + 1
      this.todoList.push({
        id,
        name: newTodo,
        isDone: false
      })
    },
    clearDone () {
      this.todoList = this.todoList.filter((item) => !item.isDone)
    },
    changeStatus (newStatus) {
      this.status = newStatus
    }
  }
}
</script>
<style>
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 400px;
}
</style>
